<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field" >
    <legend>个人信息</legend>
    <div class="layui-field-box" >
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block">
                    <input type="text" id="nickname" name="nickname" required  lay-verify="required" value="${(massage.nickname)!'输入昵称'}" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">添加头像</label>
                    <input type="file" id="img" name="file" class="layui-upload-file" lay-title="上传头像">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生日</label>
                <div class="layui-inline">
                    <input class="layui-input" name="birthday" value="${(massage.birthday)!'1990-01-01'}" onclick="layui.laydate({elem: this, festival: true})">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">个性签名</label>
                <div class="layui-input-block">
                    <input type="text" id="sign" name="sign" required lay-verify="required" value="${(massage.sign)!'输入个性签名'}" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="gender" value="m" title="男" checked>
                    <input type="radio" name="gender" value="f" title="女" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属部门</label>
                <div class="layui-input-block">
                    <select id="organization" name="organization" lay-verify="required">
                        <option value="10" selected>商品</option>
                        <option value="20">订单</option>
                        <option value="30">企划</option>
                        <option value="40">物流</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="massageForm">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</fieldset>
<script type="text/javascript" src="/layui/layui.js"></script>
<script>
    //Demo
    // 待学生自主完成
    layui.use(['form','jquery','layer','laydate','upload'], function(){
        var $ = layui.jquery;
        var form = layui.form();
        var layer = layui.layer;

        layui.upload({
            url: '/user/upImg' //上传接口
            , elem:'#img'
            , success: function (res) { //上传成功后的回调
                console.log(res);
            }
        });

        //监听提交
        form.on('submit(massageForm)', function(params){
            //表单数据
            /* var username = $("#username").val();
             var password = $("#password").val();
             var gender = $("input[name='gender']:checked").val();
             var organization = $("#organization").val();*/

            //等同于上面注释掉的部分
            var data = $("form").serializeArray();

            // 封装之后的格式
            //var data = {"username":username,"password":password}



            $.ajax({
                type: "POST",
                url: "/user/massageForm",  //后台程序地址
                data: data,  //需要post的数据
                success: function(data){           //后台程序返回的标签，比如我喜欢使用1和0 表示成功或者失败
                    if (data.result == 'success'){   //如果成功了, 则关闭当前layer
                        layer.msg('修改成功',{
                                    icon: 1,
                                    time: 1000 //1秒关闭（如果不配置，默认是3秒）
                                }
                                ,function(){//
                                    //do something
                                    //注册成功后，自动关闭当前注册页面
                                    //先得到当前iframe层的索引
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                    //parent.layer.closeAll("iframe");
                                });
                    }
                }
            });

            return false;//return false 表示不通过页面刷新方式提交表单
        });
    });
</script>
</body>
</html>